import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    TouchableOpacity,
    DeviceEventEmitter,
    ScrollView,
    CameraRoll
} from 'react-native';

import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import ToastUtils from '../Utils/ToastUtils'
import HttpUtils from '../Utils/HttpUtils'
import RuleUtils from '../Utils/RuleUtils'
import StorageUtils from '../Utils/StorageUtils'
import EncryptUtils from '../Utils/EncryptUtils'
import Constant from '../Constant/Constant'
import RouterUtils from '../Utils/RouterUtils'
import TimeUtils from '../Utils/TimeUtils'

export default class UserDetail extends React.Component
{
    static navigationOptions = ({navigation}) => ({
        gesturesEnabled: false,//是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
        headerTitle: '账号信息',
        headerStyle: {
            backgroundColor: ColorUtils.blue,
            height: ScreenUtils.statusBarHeight,
        },
        headerRight: (<Text></Text>),
        headerTintColor: ColorUtils.white,
        headerTitleStyle: {
            fontSize: ScreenUtils.Font_18,
            color: ColorUtils.white,
            fontWeight: 'normal',
            flex: 1,
            alignSelf: 'center',
            textAlign: 'center',
        }
    });

    constructor(props)
    {
        super(props);
        this.state = {
            realName: '',
            roleName: '',
            deptName: '',
            avatar: '',
        };
    }

    componentDidMount()
    {
        RouterUtils.pushRouter('UserDetail', this.props.navigation.state.key);
        this.userReload();
    }

    componentWillUnmount()
    {
        RouterUtils.popRouter('UserDetail', this.props.navigation.state.key);
    }

    userReload()
    {
        var that = this;
        StorageUtils.get('session').then((session) =>
        {
            if (session != '' && session != null)
            {
                HttpUtils.getJson(Constant.getUserInfo, session, function (resultcode, data)
                {
                    that.setState({
                        realName: data.realName,
                        roleName: data.roleName,
                        deptName: data.deptName,
                        avatar: data.avatar
                    })
                }, function (resultcode, reason)
                {
                    ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                });
            }
        });
    }

    render()
    {
        return (
            <View style={styles.container}>
                <View style={{flexDirection: 'column'}}>
                    <View style={{height: 80, paddingRight: 8, paddingTop: 8, paddingBottom: 8, paddingLeft: 6, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e4e4e4'}}>
                        <Text style={{flex: 1, marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>头像</Text>
                        <Image source={require('../img/logo.png')} style={{borderRadius: 30, marginRight: 8, width: 60, height: 60}}/>
                    </View>
                    <View style={{height: 50, paddingRight: 8, paddingTop: 8, paddingBottom: 8, paddingLeft: 6, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e4e4e4'}}>
                        <Text style={{flex: 1, marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>姓名</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.realName}</Text>
                    </View>
                    <View style={{height: 50, paddingRight: 8, paddingTop: 8, paddingBottom: 8, paddingLeft: 6, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e4e4e4'}}>
                        <Text style={{flex: 1, marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>角色</Text>
                        <Text numberOfLines={1} style={{width: 220, marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.roleName}</Text>
                    </View>
                    <View style={{height: 50, paddingRight: 8, paddingTop: 8, paddingBottom: 8, paddingLeft: 6, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e4e4e4'}}>
                        <Text style={{flex: 1, marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>部门</Text>
                        <Text style={{marginRight: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.deptName}</Text>
                    </View>
                </View>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.bgColor,
    },
});


